<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/index.css">
    <style>
        body,html {
            background: white;
        }
        ul,
        ol,
        li {
            list-style: none;
        }

        .cart_list {
            width: 1190px;
            margin: 0 auto;
        }

        .cart_list {
            min-height: 210px;
        }

        .cl1 {
            overflow: hidden;
            height: 50px;
            line-height: 50px;
            color: #3c3c3c;
            float: left;
            width: 1190px;
            /* background: red; */
            margin-left: 10px;
        }

        .cl1 input {
            margin-top: 20px;
        }


        .cl2 {
            border: 1px solid #cccccc;
            background: #fcfcfc;

            /* height: 150px; */
            width: 1190px;
            float: left;
        }

        .cl2 .cl2_list {
            width: 1190px;
            height: 110px;
            border-bottom: 1px solid #cccccc;
            padding-top: 10px;
        }

        .magTop {
            padding-top: 20px;
        }

        .cl2_list li {
            /* width: 100px; */
            height: 80px;
            float: left;
            background: #fcfcfc;
            margin-top: 10px;
            margin-left: 10px;
            margin-right: 10px;
        }


        .cl2_list li.img img {
            width: 80px;
            height: 80px;
        }

        .cl2_list li.num .amountIn {
            height: 25px;
            overflow: hidden;
            position: relative;
            z-index: 1;
            width: 77px;
        }

        .cl2_list li.num .amountIn a {
            display: block;
            height: 23px;
            width: 17px;
            border: 1px solid #e5e5e5;
            background: #f0f0f0;
            text-align: center;
            line-height: 23px;
            color: #444;
            position: absolute;
            top: 0;
        }

        .cl2_list li.num .amountIn input {
            width: 39px;
            height: 15px;
            line-height: 15px;
            border: 1px solid #aaa;
            color: #343434;
            text-align: center;
            padding: 4px 0;
            background-color: #fff;
            background-position: -75px -375px;
            position: absolute;
            z-index: 2;
            left: 18px;
            top: 0;
        }

        .btnRight {
            left: 59px;
        }

        .priceRed {
            color: red;
        }
    </style>
</head>

<body>

    <div class="header1">
        <div class="logo">
            <a href="./index.html">
                <img src="http://www.nrgou.com/App/Tpl/Home/nrgou/Public/img/logo.png" alt="">
            </a>
        </div>
        <div class="search_right">
            <div class="sr1">
                <p>搜宝贝</p>
            </div>
            <form action="" class="search_form">
                <input class="sousuoka" type="text" placeholder="宝贝、专辑...">
                <input class="btn" type="submit">
            </form>
        </div>
    </div>

    <div class="cart_list">
        <div class="cl1">
            <input type="checkbox" id="checkAll">
            <span>全选</span>
        </div>
        <div class="cl2">
            <!-- <ul class="cl2_list">
                <li class="check magTop">
                    <input type="checkbox">
                </li>
                <li class="img">
                    <img src="https://img.alicdn.com/tfscom/i2/247483/TB2omIGkxtmpuFjSZFqXXbHFpXa_!!247483.jpg_250x250.jpg"
                        alt="">
                </li>
                <li class="title magTop">
                    <span>安莉芳旗下芬狄诗女士纯色3/4厚杯光面小胸聚拢性感内衣文胸FB8226</span>
                </li>
                <li class="price_black magTop">
                    <em class="priceBlack">￥9.90</em>
                </li>
                <li class="num magTop">
                    <div class="inner">
                        <div class="amount">
                            <div class="amountIn">
                                <a href="">-</a>
                                <input type="text">
                                <a href="" class="btnRight">+</a>
                            </div>
                        </div>
                    </div>

                </li>
                <li class="price_red magTop">
                    <em class="priceRed">￥9.90</em>
                </li>
                <li class="del magTop">
                    <button>删除</button>
                </li>
            </ul> -->
        </div>
    </div>

    <!-- <ul data-id="${data.data[i].pid}">
        <li></li>
        <li></li>
        <li>
            <button>删除</button>
        </li>
    </ul>

    $("#button").click( function(){
        pid:$(this).parent().attr(data-id),
    } -->












</body>
<script src="./js/jquery-1.11.0.js"></script>
<script>
    $.get("http://jx.xuzhixiang.top/ap/api/cart-list.php", {
        id: localStorage.getItem("uid")
    }).then(data => {
        // console.log(data);
        var str = "";
        for (var i = 0; i < data.data.length; i++) {
            str += `
                <ul class="cl2_list" data-id="${data.data[i].pid}">
                    <li class="check magTop">
                        <input type="checkbox">
                    </li>
                    <li class="img">
                        <img src="${data.data[i].pimg}"
                            alt="">
                    </li>
                    <li class="title magTop">
                        <span>${data.data[i].pname}</span>
                    </li>
                    <li class="price_black magTop">
                        <em class="priceBlack">￥${data.data[i].pprice}</em>
                    </li>
                    <li class="num magTop">
                        <div class="inner">
                            <div class="amount">
                                <div class="amountIn">
                                    <a href="">-</a>
                                    <input type="text" value="${data.data[i].pnum}">
                                    <a href="" class="btnRight">+</a>
                                </div>
                            </div>
                        </div>

                    </li>
                    <li class="price_red magTop">
                        <em class="priceRed">￥${data.data[i].pnum*data.data[i].pprice}</em>
                    </li>
                    <li class="del magTop">
                        
                        <input type="button" value="删除">
                    </li>
                </ul> `;
        }
        $(".cl2").html(str);

        $("input[type=text]").change(function () {
            $.get("http://jx.xuzhixiang.top/ap/api/cart-update-num.php", {
                pid: $(this).parent().parent().parent().parent().parent().attr("data-id"),
                uid: localStorage.getItem("uid"),
                pnum: $(this).val()
            }).then(data => {
                console.log(data);
            });
        });

        // 删除
        $("input[type=button]").click(function () {

            $.get("http://jx.xuzhixiang.top/ap/api/cart-delete.php", {
                pid: $(this).parent().parent().attr("data-id"),
                uid: localStorage.getItem("uid")
            }).then(data => {
                console.log(data);
                $(this).parent().parent().remove();
            });
        });


    });


</script>

</html>